<template>
  <div class="main-content">
<!--    轮播图-->
    <div style="display: flex">
      <div style="flex: 12%; height: 350px; background-color: #0c0c0c"></div>
      <div style="flex: 76%">
        <el-carousel height="350px">
          <el-carousel-item v-for="item in carouselData" :key="item.id">
            <img :src="item" alt="" style="width: 100%; height: 350px">
          </el-carousel-item>
        </el-carousel>
      </div>
      <div style="flex: 12%; height: 350px; background-color: #0c0c0c"></div>
    </div>

<!-- 主体 -->
    <div style="width: 76%; margin: 40px auto;">
      <div style="display: flex">
        <div style="flex: 1">
          <span style="font-size: 24px; color: #333; margin-right: 50px;">在线课堂</span>
          <el-button type="primary" @click="initValue('VIDEO')">视屏课程</el-button>
          <el-button type="success" @click="initValue('SCORE')">积分专区</el-button>
          <el-button type="warning" @click="initValue('TEXT')">图文课程</el-button>
        </div>
        <div style="width: 300px">
          <div style="width: 300px">
            <el-button type="info" @click="signin">签到</el-button>
            <span style="margin-left: 30px; color: #12b127; font-weight: 550">上次签到：</span>
            <span style="color: #666666">{{ signInData?.time }}</span>
          </div>
        </div>
      </div>
<!--      展示课程的卡片 -->
      <div style="display: flex; margin-top: 20px; height: 300px">
<!--        推荐课程-->
        <div style="flex: 1; margin-right: 10px; width: 0; cursor: pointer" @click="navTo('/front/courseDetail?id=' + recommend.id)">
          <img :src="recommend.img" alt="" style="width: 100%; height: 270px; border-radius: 5px">
          <div class="overflowShow" style="font-size: 15px; margin-top: 5px;">{{recommend.name}}</div>
        </div>

        <div style="flex: 2; margin-left: 10px">
          <el-row :gutter="20">
            <el-col :span="6" v-for="item in courseData" :key="item.id" style="margin-bottom: 33px; ">
              <div style="cursor: pointer" @click="navTo('/front/courseDetail?id=' + item.id)">
                <img :src="item.img" alt="" style="width: 100%; height: 100px; border-radius: 5px">
                <div class="overflowShow" style="color: #333; margin-top: 10px">{{item.name}}</div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>

      <div style="margin-top: 50px">
        <div>
          <span style="font-size: 24px; color: #333; margin-right: 50px;">在线资源</span>
        </div>
        <div style="display: flex">
          <div style="flex: 2">
            <el-row :gutter="20" style="margin-top: 30px">
              <el-col :span="6" v-for="item in leftData" :key="item.id" style="margin-bottom: 33px">
                <img :src="item.img" alt="" style="width: 100%; height: 100px; border-radius: 5px">
                <div class="overflowShow" style="color: #333; margin-top: 10px">{{item.name}}</div>
              </el-col>
            </el-row>
          </div>
          <div style="flex: 1; margin-top: 30px; height: 300px; width: 0; margin-left: 10px">
            <img :src="fileRecommend.img" alt="" style="width: 100%; height: 270px; border-radius: 5px;">
            <div class="overflowShow" style="color: #333; font-size: 15px; margin-top: 5px;">{{fileRecommend.name}}</div>
          </div>
        </div>
      </div>

    </div>

  </div>
</template>

<script>

export default {

  data() {
    return {
      carouselData: [
          require('@/assets/imgs/lun-1.27b3b16d.jpg'),
          require('@/assets/imgs/lun-2.e2accbb8.jpg'),
          require('@/assets/imgs/lun-3.cad513e9.jpg'),
          require('@/assets/imgs/lun-4.490e3fc9.jpg'),
      ],
      recommend: {},
      courseData: [],  //前8条数据
      type: 'VIDEO',
      fileRecommend: {},
      leftData:[],
      user: JSON.parse(localStorage.getItem('xm-user')),
      signInData:{}
    }
  },
  mounted() {
    this.load('/course/select/Top8?type=' + this.type)
    this.loadRecommend('/course/getRecommend?type=' + this.type)
    this.getInformation()
    this.getSign()
  },
  // methods：本页面所有的点击事件或者其他函数定义区
  methods: {
    getSign() {
      this.$request.get('/signin/selectByUserId?id=' + this.user.id).then(res => {
        if (res.code === '200') {
          // 渲染数据到页面
          this.signInData = res.data
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    signin(){
      let data = {
        userId: this.user.id
      }
      this.$request.post('/signin/add', data).then(res => {
        if (res.code === '200') {
          this.$message.success('签到成功，恭喜你获得10个积分')
          this.getSign()
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    navTo(url){
      location.href = url
    },
    initValue(type){
      this.type = type;
      //实际请求路径和参数
      this.getData()
    },
    getData() {
      if ('SCORE' === this.type) {
        this.loadRecommend('/score/getRecommend')
        this.load('/score/getTop8')
      }else {
        // 1. 获取推荐的那个视频课程
        this.loadRecommend('/course/getRecommend?type=' + this.type)
        // 2. 获取推荐之外的最新的8个视频课程
        this.load('/course/select/Top8?type=' + this.type)
      }
    },
    load(url){
      this.$request.get(url).then(res => {
        if(res.code === '200'){
          this.courseData = res?.data
        }else {
          this.$message.error(res.msg)
        }
      })
    },
    loadRecommend(url){
      this.$request.get(url).then(res => {
        if(res.code === '200'){
          this.recommend = res?.data
        }else {
          this.$message.error(res.msg)
        }
      })
    },
    getInformation() {
      // 1. 获取推荐的那个资料
      this.$request.get('/information/getRecommend').then(res => {
        if (res.code === '200') {
          this.fileRecommend = res.data
        } else {
          this.$message.error(res.msg)
        }
      })
      // 2. 获取非推荐的8个资料
      this.$request.get('/information/selectTop8').then(res => {
        if (res.code === '200') {
          this.leftData = res.data
        } else {
          this.$message.error(res.msg)
        }
      })
    },
  }
}
</script>

<style scoped>

.overflowShow{
  white-spance: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis
}

</style>
